<template>
  <div>
    <div>
    <el-input v-model="searchform.rolename" placeholder="请输入姓名" style="width: 100px"></el-input>
    <el-button icon="el-icon-search" circle @click="querydata"></el-button>
    <el-button type="success" @click="this.ruleForm={}">清空</el-button>
    </div>
    <el-button type="button" @click="dialogVisible = true" style="float: left">添加</el-button>
    <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="rid" prop="rid" v-show="false">
          <el-input v-model="ruleForm.rid" value=" "></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="rolename">
          <el-input v-model="ruleForm.rolename"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
    </el-dialog>
    <el-table
        :data="tableData"
        style="width: 100%"
        max-height="500">
      <el-table-column
          fixed
          prop="rid"
          label="rid"
          >
      </el-table-column>
      <el-table-column
          prop="rolename"
          label="角色名">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
       <template slot-scope="scope">
          <el-switch
              disabled
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="deleteRow(scope.row.rid)"
              type="text"
              size="small">
            删除
          </el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: left">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagedata.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="pagedata.count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagedata.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import qs from 'qs'
export default {
  methods: {
    deleteRow(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("t-role/"+id).then(res=>{
          if (res.data.t){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            });
          }
          this.querydata()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleClick(row) {
      this.ruleForm= JSON.parse(JSON.stringify(row))
      this.dialogVisible=true
    },
    querydata(){
      const newobj=Object.assign(this.searchform,this.pagedata)
      alert(JSON.stringify(newobj))
      this.$axios.get("t-role/query",{params: newobj}).then(r=>{
        this.tableData=r.data.t.records;
        this.pagedata.total=r.data.t.total;
        this.pagedata.current=r.data.t.current;
        this.pagedata.size=r.data.t.size;
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    submitForm(formName) {
      this.$refs.ruleForm.validate((valid) => {
        if (this.ruleForm.rid.isEmpty){
          this.$refs.ruleForm.clearValidate(['rolename']);
        }
        if (valid) {
          alert('submit!');
          alert(JSON.stringify(this.ruleForm))
          this.$axios.post("t-role",qs.stringify(this.ruleForm)).then(res=>{
            this.dialogVisible=false,
                this.ruleForm={},
                this.querydata()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.pagedata.count=val;
      this.querydata();
    },
    handleCurrentChange(val) {
     this.pagedata.currentPage=val;
     this.querydata();
    }
  },
  data() {
    var chackname=(rule, value, callback)=>{
      if (!value){
        return callback(new Error('用户名不能为空'))
      }else {
        this.$axios.get('t-role/chackname',{params:{rolename:value}}).then(res=>{
          if (res.data.t){
            return callback(new Error('用户名重复'))
          }else {
            return callback()
          }
        })
      }

    }
    return {
      searchform:{
        rolename:'',
      },

      tableData: [],
      dialogVisible: false,
      pagedata:{
        current: 1,
        size: 4,
        total: 0,
      },
      ruleForm: {
        rid:'',
        rolename: '',
        status: '',
      },
      rules: {
        rolename: [
          { validator:chackname, trigger: 'blur' },
        ],
      }
    }
  },

  created() {
    this.querydata();
  }
}
</script>

<style scoped>

</style>